<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1">
<title>注册</title>
<link rel="stylesheet" href="/css/bootstrap.min.css"><link rel="stylesheet" href="/css/user/style.css"><script src="/js/jquery.min.js"></script><script src="/js/bootstrap.min.js"></script></head><body>
<style>
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px;
    color: #888;
    line-height: 30px;
    text-align: center;
	background-color: #000;
}
.form-box {
	margin-top: 35px;
}
.form-top {
	overflow: hidden;
	padding: 0 25px 15px 25px;
	background: #fff;
	-moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
	text-align: left;
}

.form-top-left {
	float: left;
	width: 75%;
	padding-top: 25px;
}

.form-top-left h3 { margin-top: 0;
font-size: 22px;
    font-weight: 300;
    color: #555;
    line-height: 30px;}

.form-top-right {
	float: left;
	width: 25%;
	padding-top: 5px;margin-top:15px;
	font-size: 66px;
	color: #ddd;
	text-align: right;
}

.form-bottom {
	padding: 25px 25px 30px 25px;
	background: #eee;
	-moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
	text-align: left;
}

.form-bottom form textarea {
	height: 100px;
}

.form-bottom form button.reg-btn {
	width: 100%;
}

.form-bottom form .input-error {
	border-color: #4aaf51;
}

.social-login {
	margin-top: 35px;
}

.social-login h3 {
	color: #fff;
}

.social-login-buttons {
	margin-top: 25px;
}
input[type="text"], input[type="password"], textarea, textarea.form-control {
    height: 50px;
    margin: 0;
    padding: 0 20px;
    vertical-align: middle;
    background: #f8f8f8;
    border: 3px solid #ddd;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 50px;
    color: #888;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}
button.reg-btn {
    height: 50px;
    margin: 0;
    padding: 0 20px;
    vertical-align: middle;
    background: #4aaf51;
    border: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 50px;
    color: #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    text-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}
button.reg-btn:hover { opacity: 0.6; color: #fff; }
</style>
<div class="container-fluid">
<div class="row">
	<div class="col-sm-6 col-sm-offset-3 form-box">
		<div class="form-top">
			<div class="form-top-left">
				<h3>注册</h3>
				<p>请输入您的账号、密码 / <a href="{:url('index')}" style="color:#f60;">登录</a> / <a href="{:url('resetpwd')}" style="color:#f60;">忘记密码</a></p>
			</div>
			<div class="form-top-right">
				<i class="glyphicon glyphicon-user"></i>
			</div>
		</div>
		<div class="form-bottom">
			<form method="post" action="{:url('user/Login/reg')}" class="login-form" role="form">
				<div class="form-group">
					<label class="sr-only" for="form-mobile">Mobile</label>
					<input type="text" id="mobile" name="mobile" placeholder="请输入手机号..." class="form-mobile form-control" required>
				</div>
                <div class="form-group">
                    <label class="sr-only" for="form-captcha">验证码</label>
                    <input style="width:200px;display:inline;" type="text" id="captcha" name="captcha" placeholder="请输入图形验证码..." class="form-captcha form-control" required>
                    <img id="captcha-img" onclick="javascript:document.getElementById('captcha-img').src='{:captcha_src()}?'+Math.random();" style="width:150px;height:48px;" src="{:captcha_src()}" alt="captcha" />
				</div>
                <div class="form-group">
                    <label class="sr-only" for="form-smscode">手机验证码</label>
                    <input style="width:200px;display:inline;" type="text" id="smscode" name="smscode" placeholder="请输入手机验证码..." class="form-smscode form-control" required>
                    <button style="width:150px;height:50px;" type="button" class="btn btn-danger" id="getsmscode" onclick="getSmsCode()">获取验证码</button>
				</div>
				<div class="form-group">
					<label class="sr-only" for="form-password">Password</label>
					<input type="password" id="password" name="password" placeholder="请输入密码..." class="form-password form-control" required>
				</div>
				<div class="form-group">
					<label class="sr-only" for="form-repassword">RePassword</label>
					<input type="password" id="re_password" name="re_password" placeholder="请输入确认密码..." class="form-repassword form-control" required>
				</div>
                <input type="text" id="smstype" name="smstype" style="display:none;" value="1">
				<button type="submit" class="reg-btn">立即注册</button>
			</form>
		</div>
	</div>
</div>
</div>

<script type="text/javascript" src="/js/md5.min.js"></script>
<script>
$('.login-form input[type="text"], .login-form input[type="password"], .login-form textarea').on('focus', function() {
	$(this).removeClass('input-error');
});

$('.login-form').on('submit', function(e) {
    var password = $('#password').val().trim();
    var re_password = $('#re_password').val().trim();
    if(password != re_password){alert('密码与确认密码不一致');return false;}
    
    var patrn=/(?=[-_a-zA-Z0-9]*?[A-Z])(?=[-_a-zA-Z0-9]*?[a-z])(?=[-_a-zA-Z0-9]*?[0-9])[-_a-zA-Z0-9]{6,18}/;  
    if (!patrn.exec(password) || !patrn.exec(re_password))
    {
        alert('密码6-18位，至少一个大写字母，一个小写字母和一个数字');
        return false;
    }
    //密码md5加密
    //$('#password').val(md5(password));
    //$('#re_password').val(md5(re_password));
    
	$(this).find('input[type="text"], input[type="password"], textarea').each(function(){
		if( $(this).val() == "" ) {
			e.preventDefault();
			$(this).addClass('input-error');
		}
		else {
			$(this).removeClass('input-error');
		}
	});
});
</script>

<script>
//获取验证码
function getSmsCode()
{
    var obj = $("#getsmscode");
    
    var captcha = $("#captcha").val();
    if(captcha==''){alert('请输入图形验证码');return false;}
    
    //验证手机号码
    if (checkPhone())
    {
        $.ajax({
            type: "GET",
            url: '{:url("getRegSmscode")}',
            data: { mobile: $('#mobile').val(), type: 1, captcha: $('#captcha').val() },
            dataType:"json",
            success: function (res) {
                console.log(res);
                if (res.code == 0) {
                    alert('验证码已发送，请注意查收');
                    settime(obj); //倒计时
                }
                else {
                    alert(res.msg);
                    return;
                }
            },
            error: function (res) {
                alert('未知异常导致请求失败，请重试');
            }
        });
    }
    else {
        $('#mobile').focus();
        return false;
    }
}

//验证手机号码
function checkPhone()
{
    var phone = $('#mobile').val();
    var pattern = /^1[0-9]{10}$/;
    if (phone.length == 0)
    {
        alert('请输入手机号码');
        //$.toptip("请输入手机号码", 'error');
        return false;
    }
    
    if (!pattern.test(phone))
    {
        alert('请输入正确的手机号码');
        //$.toptip("手机号格式错误", 'error');
        return false;
    }
    
    return true;
}

var countdown = 120;
function settime(obj)
{
    if (countdown == 0)
    {
        obj.attr('disabled',false);
        obj.text("获取验证码");
        countdown = 120;
        return;
    }
    else
    {
        obj.attr('disabled',true);
        obj.text("重新发送(" + countdown + ")");
        countdown--;
    }
    
    setTimeout(function () {
        settime(obj);
    }, 1000);
}
</script>
</body></html>